<template>
	<view class="index">
		<view class="index_header">
			<view class="index_header_display">
				<u--image src="../../static/image/longLogo.jpg" width="686rpx" height="64rpx" mode="widthFix"></u--image>						
			</view>
		</view>
		<view class="swiper">
			<view v-for="(tab,index) in tabs">
				<door-empty v-if="tab.list.length == 0" text=" "></door-empty>
				<scroll-view class="scroll" :scroll-y="true" v-if="tab.list.length > 0" @scrolltolower="scrolltolower">
					<view class="list_group">
						<view class="list_group_item" v-for="(item, index) in tab.list" :key="`item${index}`" style="height:100px;display:flex" @click="getDetail(item)">
							<view class="list_group_item_time" style="display:flex;align-items:center;justify-content:space-between;" v-if="!isLogin||(isLogin&&item.isMe)">
								<text style="flex:1;font-size:28rpx;font-weight:600;" class="u-line-1">{{item.deptName}}</text>
								<view class="list_group_item_info-author" style="padding: 8rpx 42rpx;background-color: #1cc7c2;color: #fff;border-radius:40rpx;">
									{{item.leader===null?'无':item.leader}}
								</view>							
							</view>
							<view class="list_group_item_time1" style="display:flex;align-items:center;justify-content:space-between;" v-if="isLogin&&!item.isMe">
								<text style="flex:1;font-size:28rpx;font-weight:600;" class="u-line-1">{{item.deptName}}</text>
								<view class="list_group_item_info-author" style="padding: 8rpx 42rpx;background-color: #1cc7c2;color: #fff;border-radius:40rpx;">
									{{item.leader===null?'无':item.leader}}
								</view>							
							</view>
							<view  style="position: relative;">
								<view class="list_group_item_info" style="background: rgba(255, 255, 255, .9);position: absolute;top:33px;background-color:#fff;width:286px;height:58px;left: calc(50% - 0vw);border-radius: 40rpx;">
									<view style="display: flex;align-items: center;justify-content: space-between;">
										<view class="list_group_item_info-title" v-html="item.introduce" v-if="!isLogin||(isLogin&&item.isMe)"></view>
										<view class="list_group_item_info-title1" v-html="item.introduce" v-if="isLogin&&!item.isMe"></view>
									</view>																												
								</view>
							</view>
						</view>
					</view>
					<u-loadmore :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText"
						:nomore-text="nomoreText" color="#8588AA" fontSize="24rpx" icon-color="#8588AA" :dashed="true"
						marginTop="20" marginBottom="20" :line="true" lineColor="#8588AA" />
				</scroll-view>				
			</view>
		</view>
		<door-tabbar :active="0"></door-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				banner: [],
				notice: [],
				notice2:[],
				noticeitem:[],
				tabs: [{
					name: '热门推荐',
					list: [],
					page: 1,
					status: 'nomore', // loadmore / loading / nomore
				}],
				loadmoreText: '加载更多',
				loadingText: '努力加载中...',
				nomoreText: '没有更多了',
				current: 0,
				windowWidth: 0,
				isLogin: false,				
			}
		},
		onShow() {
			if (uni.getStorageSync('userInfo')) {
				let storage = JSON.parse(uni.getStorageSync('userInfo'));
				this.tabs[0].list.forEach(item => {
					if (item.deptId===storage.deptId) {
						item.isMe = true;
					}
				})				
			}
			let local = location.href;
			let userId = this.getParamQueryString(local, "userId");
			let code = this.getParamQueryString(local, "code");
			if (userId&&code) {
				this.userId = userId;
				this.getOpen(userId, code);
			}
			uni.hideTabBar()
			this.getSystemInfo();
			this.getSchoolList();
		},
		methods: {
			getParamQueryString (url, name) {
				let subStr = name + '='
				if (url.indexOf(subStr) !== -1) {
					let arr = url.split(subStr)
					let sub1 = arr[1]
					if (sub1.indexOf('&') !== -1) {
					let arr2 = sub1.split('&')
					let sub2 = arr2[0]
						return sub2
					} else {
						return sub1
					}
				}
				return ''
			},
			async getOpen(userId, code) {								
				await uni.request({
					method: 'POST',
					url: `${this.$webBaseUrl}/api/nft-school/auth/getopenid`,
					timeout: 30000,					
					data: {
						userId: userId,
						code: code,
					},
					success: res => {
					},
					fail: err => {
						console.log(err);
					}
				})
			},
			getSystemInfo() {
				let _this = this;
				uni.getSystemInfo({
					success(res) {
						_this.windowWidth = res.windowWidth;
					}
				})
			},
			async getSchoolList() {				
				this.$set(this.tabs[0], 'status', 'loading');
				let phonenumber = '';
				if (uni.getStorageSync('userInfo')) {
					phonenumber = JSON.parse(uni.getStorageSync('userInfo')).phone;
					this.isLogin = true;
				}else {
					if (uni.getStorageSync('phone')) {
						let user = await uni.$u.api.getUserInfo({
							phone: uni.getStorageSync('phone'),
						})
						let userInfo = JSON.stringify(user.data);
						phonenumber = userInfo.phone;
						this.isLogin = true;
					}else {
						let local = location.href;
						let userId = this.getParamQueryString(local, "userId");
						if (userId) {
							let user = await uni.$u.api.getUserInfoByUserId({
								userId: userId,
							})
							let userInfo = JSON.stringify(user.data);
							phonenumber = userInfo.phone;
							this.isLogin = true;
						}else {
							this.isLogin = false;
						}
					}					
				}
				let page = JSON.parse(JSON.stringify(this.tabs))[0]['page'];
				let res = await this.$u.api.getSchoolList({
					pageNo: page,
					pageSize: 10,
					phone: phonenumber
				});
				let list = JSON.parse(JSON.stringify(this.tabs[0].list));
				if (page == 1) {
					list = res.data.pageData.map(item => {
						return {
							deptId: item.deptId,
							deptName: item.deptName,
							email: item.email,
							integral: item.integral,								
							introduce: item.introduce,
							leader: item.leader,
							phone: item.phone,
							wxcode: item.wxcode,
							isMe: item.isMe
						}
					});
					this.$set(this.tabs[0], 'list', list);
					this.$set(this.tabs[0], 'status', list.length < res.data.totalDataNum ? 'loadmore' : 'nomore');
					this.status = list.length < res.data.totalDataNum ? 'loadmore' : 'nomore';
				} else {
					if (list.length < res.data.totalDataNum) {
						let addList = res.data.pageData.map(item => {
							return {
								deptId: item.deptId,
								deptName: item.deptName,
								email: item.email,
								integral: item.integral,								
								introduce: item.introduce,
								leader: item.leader,
								phone: item.phone,
								wxcode: item.wxcode,
								isMe: item.isMe
							}
						});
						list = list.concat(addList)
						this.$set(this.tabs[0], 'list', list);
						this.$set(this.tabs[0], 'status', list.length < res.data.totalDataNum ? 'loadmore' : 'nomore');
						this.status = list.length < res.data.totalDataNum ? 'loadmore' : 'nomore';
					} else {						
						this.$set(this.tabs[0], 'status', 'nomore');
						this.$set(this.tabs[0], 'page', page - 1);
						this.status = 'nomore';
					}
				}
			},
			getDetail(e) {
				if (!this.isLogin||(this.isLogin&&e.isMe)) {
					uni.navigateTo({
						url: `/pages/mine/collectionDetails?deptId=${e.deptId}`
					})
				}
			},
			scrolltolower() { // 下一页
				this.tabs[this.current].page += 1;
				if (this.current == 0) {
					this.getSchoolList();
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.index {
		background-color: #fff;
		padding: 0;
		width: 100vw;		
		box-sizing: border-box;
		overflow-y: auto;
		&_header {
			padding: 20rpx 40rpx 0 40rpx;
			&_display {
				display: flex;
				align-items: center;
				&_notice {					
				}
			}

			&_swiper {
				margin-top: 24rpx;
				box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.08), 0px 2px 20px rgba(0, 0, 0, 0.04);
			}
		}

		.logo {
			margin-bottom: 20rpx;
		}
		.tabs {
			width: 100%;
			// background-color: $time-color-fff;
			background-color: #f9f9f9;
			height: 100rpx;
			line-height: 100rpx;
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			z-index: -5;

			/deep/ .u-tabs {
				width: 100%;
			}

			&_right {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
				line-height: 40rpx;

				text {
					margin-right: 10rpx;
				}
			}
		}
		.swiper {
			width: 100%;
			background-color: #f9f9f9;
			margin-top: 10px;
		}
		.scroll {
			width: 100%;
			height: calc(100vh - 88rpx);
		}
		.list_group {
			width: 100%;
			padding: 0 40rpx;
			box-sizing: border-box;
			&_item {
				width: 100%;
				background-color: #fff;
				box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.08), 0px 2px 20px rgba(0, 0, 0, 0.04);				
				border-radius: 40rpx;
				position: relative;
				margin-bottom: 40rpx;
				box-sizing: border-box;
				&_time {
					position: absolute;					
					padding-left: 12rpx;
					width: 84vw;
					top: 20rpx;
					left: 50%;
					transform: translateX(-50%);
					color: #333;
					font-size: 24rpx;
					z-index: 1;
					border-radius:40rpx;
					background: rgba(255, 255, 255, .7);
				}
				&_time1 {
					position: absolute;					
					padding-left: 12rpx;
					width: 84vw;
					top: 20rpx;
					left: 50%;
					transform: translateX(-50%);
					color: #bbb;
					font-size: 24rpx;
					z-index: 1;
					border-radius:40rpx;
					background: rgba(255, 255, 255, .7);
				}
				&_info {
					position: relative;
					padding: 20rpx;
					
					&-title {
						font-size: 24rpx;
						font-weight: 700;
						color: $time-color-333;	
						overflow:hidden;
						display:-webkit-box;
						-webkit-box-orient:vertical;
						-webkit-line-clamp:3;
					}
					&-title1 {
						font-size: 24rpx;
						font-weight: 700;
						color: #bbb;						
					}

					&-num {
						display: inline-flex;
						box-sizing: border-box;
						height: 44rpx;
						line-height: 44rpx;
						font-size: 24rpx;
						border: 1px solid #80f5cf;
						color: #1CC7C2 !important;
						font-size: 28rpx;
						border-radius: 10rpx;
						.limit {
							padding: 0rpx 20rpx;
							background: #cdf8f7 ;
							height: 42rpx;
							border-radius: 8rpx;
							color: #3AE0AA !important;
							border-right: 1px solid #80f5cf;
							line-height: 40rpx;	
							font-weight: 600;
						}
						.num {
							padding: 0 20rpx;
							border-top-right-radius: 10rpx !important;
							border-bottom-right-radius: 10rpx !important;
							font-weight: 600;
						}
					}
					&-author {
						font-size: 24rpx;
						// color: #1cc7c2;
						line-height: 34rpx;
						// margin-top: 10rpx;
						
						text {
							margin-left: 12rpx;
						}
					}

					&-price {
						font-weight: 900;
						position: absolute;
						right: 40rpx;
						bottom: 30rpx;
					}
				}
			}
		}
		.list_group_item_info-author{
			font-size: 24rpx;
			line-height: 34rpx;
			// margin-top: 10rpx;			
			text {
				margin-left: 12rpx;
			}
		}

		/deep/ .u-line {
			border-color: #8588AA !important;
		}

		/deep/ .u-tabs__wrapper__nav__line {
			height: 10rpx !important;
		}

		/deep/ .u-sticky {
			top: 0 !important;
		}
	}
</style>
